<template>
  <div>
    <van-search
      v-model="value"
      shape="round"
      show-action
      :placeholder="title"
      @search="onSearch"
    >
      <template #left>
        <div @click="goBack">
          <van-icon name="arrow-left" style="font-size: 20px" />
        </div>
      </template>
      <template #action>
        <div @click="GO">搜索</div>
      </template>
    </van-search>
  </div>
  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul>
        <li v-for="item in searchList" :key="item" @click="goAbout(item.proid)">
          <div>
            <img :src="item.img1" alt="" />
            <p class="p1">{{ item.proname }}</p>
            <p class="p2">￥{{ item.originprice }}</p>
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import { SearchList } from "../../service/pro.js";
export default {
  data() {
    return {
      searchList: [], // 搜索列表
      loading: false, // 是否加载完成
      finished: false, // 加载是否结束
      title:"",
      form: {
        count: 1,
        limitNum: 10,
        keyword: "",
      },
    };
  },
  created() {
    this.getSearchList();
  },
  methods: {
    goBack() {
      history.back();
    },
    getSearchList() {
      let val = this.$route.query.val;
      // console.log(val);
      SearchList({
        count: this.form.count,
        limitNum: this.form.limitNum,
        keyword: this.form.keyword,
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.code === "200") {
          res.data.data.forEach((item) => {
            if (item.category == val) {
              this.searchList.push(item);
              this.title = item.category
            }
          });
          // 加载状态结束;
          this.loading = false;
          this.form.count++;

          // 数据全部加载完成;
          if (this.searchList.length >= 10) {
            this.finished = true;
          }
        }
        console.log(this.searchList);
      });
    },
    goAbout(val) {
      this.$router.push({ path: "/about", query: { id: val } });
    },
  },
};
</script>
<style scoped>
img {
  width: 100%;
  height: 100%;
  display: block;
}
ul,
li {
  list-style: none;
}
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
li {
  width: 48%;
  /* height: 320px; */
  margin-right: 1%;
}
li > div {
  width: 100%;
  height: 100%;
}
li > div > img {
  height: 200px;
}
li > div > .p1 {
  font-size: 10px;
  display: -webkit-box;
  overflow: hidden;
  flex-direction: row;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 16px;
  margin-top: 10px;
  font-weight: 700;
}

li > div > .p2 {
  font-size: 16px;
  color: red;
  font-weight: 700;
  margin: 1.333333vw 0;
  padding-bottom: 10px;
}
.van-list {
  margin-bottom: 50px;
}
</style>
